<template>
  <div class="app-container-trans">
    <div class="tree_control">
      <div class="title">{{ $t('menu.tree') }}</div>
      <el-tree ref="way_tree" :data="menuTree" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="nodeClick" />
    </div>
    <div class="container">
      <el-form ref="formSearch" :model="searchForm" label-width="100px">
        <el-row>
          <el-col :span="19">
            <el-row class="form_table">
              <el-col :span="8">
                <el-form-item :label="$t('menu.menuCode')" prop="menuCode">
                  <el-input v-model="searchForm.menuCode" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('menu.menuName')" prop="menuName">
                  <el-input v-model="searchForm.menuName" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('menu.path')" prop="path">
                  <el-input v-model="searchForm.path" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('businessGlossary.enabled')" prop="enabled">
                  <el-select v-model="searchForm.enabled" :placeholder="$t('placeholder.select')" clearable>
                    <el-option v-for="item in $enableDict" :key="item.id" :label="item.text" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('businessGlossary.sysCode')" prop="sysCode">
                  <el-select v-model="searchForm.sysCode" :placeholder="$t('placeholder.select')" clearable>
                    <el-option v-for="item in systems" :key="item.id" :label="item.text" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button
              type="primary"
              @click="
                searchForm.pageNumber = 1
                getData()
              "
            >{{ $t('btn.query') }}</el-button>
            <el-button type="danger" @click="resetForm('formSearch')">{{ $t('btn.reset') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-button v-permission="'gaeaMenuController#insert'" type="primary" icon="el-icon-plus" @click="openCreateUser">{{ $t('btn.add') }}</el-button>
      <el-button v-permission="'gaeaMenuController#update'" type="primary" icon="el-icon-edit" :disabled="selectedList.length != 1" @click="editDetail('edit', null)">{{ $t('btn.edit') }}</el-button>
      <delete-btn v-permission="'gaeaMenuController#deleteById'" :disabled="selectedList.length < 1" @handleDelete="handleDelete" />
      <el-button v-permission="'gaeaMenuController#authorityTree'" type="primary" icon="el-icon-edit" :disabled="selectedList.length != 1" @click="setAuth">设定权限</el-button>
      <el-button v-permission="'gaeaMenuExtensionController#queryMenuExtension'" type="primary" icon="el-icon-edit" :disabled="selectedList.length != 1" @click="toNextView">设定动态列</el-button>
      <el-table stripe :data="tableList" border @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="50" center />
        <el-table-column :label="$t('menu.menuCode')" min-width="140" align="center">
          <template slot-scope="scope">
            <span class="view" @click="editDetail('view', scope.row)">{{ scope.row.menuCode }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('menu.sort')" prop="sort" min-width="110" align="center" />
        <el-table-column :label="$t('menu.parentCode')" prop="parentCode" min-width="140" align="center" />

        <el-table-column prop="menuName" :label="$t('menu.menuName')" min-width="140" align="center" />
        <el-table-column prop="sysCode" :label="$t('businessGlossary.sysCode')" min-width="110" align="center" />
        <el-table-column prop="path" :label="$t('menu.path')" min-width="200" align="center" />
        <el-table-column prop="createTime" :label="$t('businessGlossary.creationTime')" align="center" min-width="160" />
        <el-table-column prop="createBy" :label="$t('businessGlossary.creator')" align="center" min-width="160" />
        <el-table-column prop="updateTime" :label="$t('businessGlossary.modifyTime')" align="center" min-width="180" />
        <el-table-column prop="updateBy" :label="$t('businessGlossary.modifyUser')" align="center" min-width="140" />
      </el-table>
      <el-pagination v-show="total > 0" background :current-page.sync="searchForm.pageNumber" :page-sizes="$pageSizeAll" :page-size="searchForm.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog :title="$t(`btn.${dialogTittle}`)" width="60%" :close-on-click-modal="false" center :visible.sync="basicDialog" @close="closeDialog">
      <el-form ref="userForm" :model="dialogForm" :rules="formRules" label-width="100px" style="padding-right: 15px" :disabled="dialogTittle == 'view'">
        <el-row class="form_table">
          <el-col :span="12">
            <el-form-item :label="$t('menu.menuCode')" prop="menuCode">
              <el-input v-model="dialogForm.menuCode" :disabled="dialogTittle != 'add'" placeholder="路由的name值" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.sort')" prop="sort">
              <el-input v-model="dialogForm.sort" type="Number" placeholder="如：10,1010等" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.parentCode')" prop="parentCode">
              <el-select v-model="dialogForm.parentCode" :placeholder="$t('placeholder.select')" clearable filterable>
                <el-option v-for="item in menuParentList" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('menu.menuName')" prop="menuName">
              <el-input v-model="dialogForm.menuName" placeholder="title" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.path')" prop="path">
              <el-input v-model="dialogForm.path" placeholder="path" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.menuIcon')" prop="menuIcon">
              <el-input v-model="dialogForm.menuIcon" placeholder="icon" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.component')" prop="component">
              <el-input v-model="dialogForm.component" placeholder="component" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.hidden')" prop="hidden">
              <el-select v-model="dialogForm.hidden" :placeholder="$t('placeholder.select')" clearable>
                <el-option key="1" :label="$t('menu.yes')" :value="1" />
                <el-option key="0" :label="$t('menu.no')" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.alwaysShow')" prop="alwaysShow">
              <el-select v-model="dialogForm.alwaysShow" :placeholder="$t('placeholder.select')" clearable>
                <el-option key="1" :label="$t('menu.yes')" :value="1" />
                <el-option key="0" :label="$t('menu.no')" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('menu.redirectUrl')" prop="redirectUrl">
              <el-input v-model="dialogForm.redirectUrl" placeholder="redirect" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('businessGlossary.sysCode')" prop="sysCode">
              <el-select v-model="dialogForm.sysCode" :placeholder="$t('placeholder.select')" clearable>
                <el-option v-for="item in systems" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('businessGlossary.enabled')" prop="enabled">
              <el-select v-model="dialogForm.enabled" :placeholder="$t('placeholder.select')" clearable>
                <el-option v-for="item in $enableDict" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button v-if="dialogTittle != 'view'" type="primary" plain @click="confirm">{{ $t('btn.confirm') }}</el-button>
        <el-button type="danger" plain @click="basicDialog = false">{{ $t('btn.close') }}</el-button>
      </div>
    </el-dialog>
    <menu-auth :id="id" :visib="authDialog" @handleClose="authDialog = false" />
  </div>
</template>
<script>
import { getMenuTree, getMenuList, addMenu, editMenu, deleteMenus, getParentMenuList } from '@/api/authority'
import { dataDictionary } from '@/api/common'
export default {
  name: 'MenuConfig', // 此name必须与路由中的name字段相同才会被keep-alive组件缓存
  components: {
    MenuAuth: require('./components/MenuAuth').default,
  },
  data() {
    return {
      menuParentList: [],
      systems: [],
      menuTree: [],
      id: '',
      authDialog: false,
      selectedList: [],
      searchForm: {
        menuCode: null,
        menuName: null,
        path: null,
        sysCode: null,
        enabled: null,
        code: null,
        pageNumber: 1,
        pageSize: 10,
      },
      tableList: [],
      total: 0,
      dialogTittle: 'view',
      basicDialog: false,
      dialogForm: {
        menuCode: '', // 菜单代码
        menuName: '', // 菜单名称
        sysCode: 'PC', // 系统代码
        parentCode: '',
        path: '',
        menuIcon: '',
        sort: '',
        enabled: 1, // 0禁用，1启用
        deleteFlag: 0, // 0未删，1已删除
        redirectUrl: '',
        component: '',
        hidden: 0,
        alwaysShow: 1,
      },
      formRules: {
        menuCode: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
      },
      // relatedBtnDialog: false,
      form: {
        menuCode: null,
        actionCodes: [],
        treeData: [],
        checkedIds: [],
      },
    }
  },
  created() {
    this.getTree()
    this.getData()
    this.getSystem()
  },
  methods: {
    // 点击tree节点时 将tree的id作为上级机构代码 查询列表
    nodeClick(d) {
      this.searchForm.code = d.id
      this.dialogForm.parentCode = d.id
      this.getData()
    },
    // 获取侧边树结构
    async getTree() {
      const { code, data } = await getMenuTree()
      if (code != '200') return
      this.menuTree = data
    },
    // 获取父级菜单接口
    async getParentMenu() {
      const { code, data } = await getParentMenuList()
      if (code != '200') return
      this.menuParentList = data
    },
    // 获取系统终端
    async getSystem() {
      const { code, data } = await dataDictionary('SYSTEM_CODE')
      if (code != '200') return
      this.systems = data
    },
    setAuth() {
      this.id = this.selectedList[0].menuCode
      this.authDialog = true
    },
    // 跳转进入
    toNextView() {
      const row = this.selectedList[0]
      this.$router.push({ path: 'menu-detail', query: { id: row.id, code: row.menuCode }})
    },
    // 提交按钮
    confirm() {
      this.$refs.userForm.validate(async(valid, obj) => {
        if (valid) {
          if (this.dialogTittle == 'add') {
            const { code } = await addMenu(this.dialogForm)
            if (code != '200') return
            this.closeDialog(true)
          } else {
            const { code } = await editMenu(this.dialogForm)
            if (code != '200') return
            this.closeDialog(true)
          }
        } else {
          return
        }
      })
    },
    // 关闭弹窗
    closeDialog(bool) {
      bool && this.getData() // 点确定关闭弹窗的时候才会刷新列表
      this.$refs['userForm'].resetFields()
      this.basicDialog = false
    },
    // 删除操作
    async handleDelete() {
      const ids = this.selectedList.map((item) => item.id)
      const { code } = await deleteMenus(ids)
      if (code != '200') return
      this.getData()
    },
    // 新建操作
    openCreateUser() {
      this.dialogTittle = 'add' // 新建
      this.getParentMenu()
      this.basicDialog = true
    },
    // 编辑和查看操作
    editDetail(title, row) {
      this.dialogTittle = title
      this.getParentMenu()
      this.basicDialog = true
      this.$nextTick(() => {
        this.dialogForm = JSON.parse(JSON.stringify(row || this.selectedList[0]))
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.tableList = []
      this.total = 0
      this.getData()
    },
    // 查询
    async getData() {
      const { data, code } = await getMenuList(this.searchForm)
      if (code != '200') return
      this.tableList = data.records
      this.total = data.total
    },
    // 选择项改变时
    handleSelectionChange(val) {
      this.selectedList = val
    },
    // 页码改变
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber
      this.getData()
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = val
      this.getData()
    },
  },
}
</script>
